<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="point h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="积分明细" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="cardTitle">
        <view class="num1">{{ globalData.userInfo.pointsBalance || 0 }}</view>
        <view class="lb1">当前积分</view>
        <view class="num2">{{ Number(globalData.userInfo.tempPoints).toFixed(0) || 0 }}</view>
        <view class="lb2">临时积分</view>
        <view class="num3">{{ globalData.userInfo.cardsBalance || 0 }}</view>
        <view class="lb3">套卡次数</view>
      </view>
      <view class="flb bar">
        <view class="w100">
          <uni-data-select class="select w100p" v-model="time" :clear="false" :localdata="pointList" @change="pointTimeChange"></uni-data-select>
        </view>
        <view class="flr h35">
          <view class="lb4 l35 f18 mr6">收入</view>
          <view class="lb5 l35 f18 mr12">{{ pointInfo.totalIncome }}</view>
          <view class="lb4 l35 f18 mr6">支出</view>
          <view class="lb6 l35 f18 mr2">{{ pointInfo.totalExpenditure }}</view>
        </view>
      </view>
      <view class="cardContent oxnone oyauto">
        <view v-for="item in pointInfo.detailList" :key="item.id" class="cardItem mt10">
          <view class="flb">
            <view class="flr">
              <text class="lb7">{{ item.type }}</text>
              <text v-if="item.pointStatus === '1'" class="lb8">{{ '-待审核' }}</text>
              <text v-else class="lb9">{{ '-已结算' }}</text>
            </view>
            <view class="flr">
              <text v-if="item.ieType === '1'" class="lb9 mr4">{{ Number(item.qty).toFixed(0) }}</text>
              <text v-if="item.ieType === '2'" class="lb8 mr4">-{{ Number(item.qty).toFixed(0) }}</text>
              <text class="lb10">积分</text>
            </view>
          </view>
          <view class="flb mt12">
            <view class="lb11 l20 f14">{{ item.createTime }}</view>
            <view v-if="item.type === '积分提现'" class="lb11 l20 f14">提现申请，待审核</view>
            <view v-else-if="item.type === '积分充值'" class="lb11 l20 f14">积分充值获得</view>
            <view v-else-if="item.type === '购买查看次数'" class="lb11 l20 f14">使用积分购买1张次卡</view>
            <view v-else-if="item.type === '分享需求被好评收益'" class="lb11 l20 f14">您转发的需求倍打赏了</view>
            <view v-else-if="item.type === '完善信息获得积分'" class="lb11 l20 f14">完善信息获得积分</view>
            <view v-else class="lb11 l20 f14" @click="detailClick(item)">
              {{ '查看详情' }}
              <uni-icons type="right" size="16" color="#a6a6a6" />
            </view>
          </view>
        </view>
        <view class="noData" v-if="pointInfo.detailList.length === 0">
          <view class="noDataImgBox flca">
            <image class="nodataImg" src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/9b45410e958a47c68d56e64cc27fbc29e.jfif" mode="scaleToFill" />
          </view>
          <view class="noRecord">暂无记录</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  data() {
    return {
      pointList: [],
      pointInfo: {
        detailList: []
      },
      time: ''
    };
  },
  onShow() {
    this.getUserInfo();
    this.queryPointList();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryPointList() {
      let res = await api.request({ url: '/appUser/queryMyPointsDetail', method: 'get' });
      res.data.forEach(el => {
        el.value = el.recordTime;
        el.text = el.recordTime;
      });
      this.time = res.data[0].recordTime;
      this.pointList = res.data;
      this.pointInfo = res.data[0];
    },
    pointTimeChange(val) {
      this.pointList.forEach(el => {
        if (val === el.recordTime) {
          this.pointInfo = el;
        }
      });
    },
    detailClick(item) {
      if (item.demandType === '1') {
        uni.navigateTo({ url: `/pages/procurement/detail/index?purchaseInfoId=${item.demandId}` });
      } else if (item.demandType === '2') {
        uni.navigateTo({ url: `/pages/sale/detail/index?saleInfoId=${item.demandId}&type=look` });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.point {
  .contentBox {
    padding-top: 12rem !important;
    box-sizing: border-box;
    .cardTitle {
      background: url('~@/static/img/my/pointBg.png');
      background-size: 100% 100%;
      height: 139rem;
      margin: 0 8rem;
      width: calc(100% - 16rem);
      position: relative;
      .num1,
      .num2,
      .num3,
      .lb1,
      .lb2,
      .lb3 {
        position: absolute;
        line-height: 1;
        color: #fff;
        text-align: center;
      }
      .num1 {
        font-size: 48rem;
        width: 130rem;
        top: 30rem;
        left: 25rem;
        text-align: left;
      }
      .lb1 {
        font-size: 14rem;
        width: 130rem;
        top: 90rem;
        left: 25rem;
        text-align: left;
      }
      .num2 {
        font-size: 30rem;
        top: 30rem;
        right: 15rem;
        width: 90rem;
        text-align: left;
      }
      .lb2 {
        font-size: 14rem;
        top: 42rem;
        right: 109rem;
      }
      .num3 {
        font-size: 30rem;
        top: 80rem;
        right: 15rem;
        width: 90rem;
        text-align: left;
      }
      .lb3 {
        font-size: 14rem;
        top: 92rem;
        right: 109rem;
      }
    }
    .bar {
      margin: 0 12rem;
      width: calc(100% - 24rem);
      .lb4 {
        color: #a6a6a6;
      }
      .lb5 {
        color: #ff7c00;
      }
      .lb6 {
        color: #383838;
      }
    }
    .cardContent {
      margin: 0 12rem;
      box-sizing: border-box;
      height: calc(100% - 174rem);
      .cardItem {
        border-radius: 10rem;
        background: #fffbf7;
        padding: 12rem;
        box-sizing: border-box;
        .lb7 {
          font-size: 16rem;
          color: #383838;
          font-weight: bold;
        }
        .lb8 {
          font-size: 16rem;
          color: #ff5733;
          font-weight: bold;
        }
        .lb9 {
          font-size: 16rem;
          color: #25c465;
          font-weight: bold;
        }
        .lb10 {
          font-size: 16rem;
          color: #383838;
        }
        .lb11 {
          font-size: 14rem;
          color: #a6a6a6;
        }
      }
    }
  }
  :deep {
    .uni-select {
      height: 32rem !important;
    }
  }
}
</style>
